<template>
  <!-- 商品列表页 -->
  <div>
    <!-- 顶部 -->
    <Top></Top>

    <!-- 导航栏 -->
    <Header></Header>
    
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row :gutter="20">
          <!-- 图片 -->
          <el-col :span="8" >
           <img :src="$imgPrefix + goods.image" alt="">
          </el-col>
           <!-- 信息、操作 -->
          <el-col :span="8" >
           <p><b>{{goods.name}}</b></p>
           <p><span>价格：</span>{{goods.price}}</p>
           <p><span>库存：</span>{{goods.stock}}</p>
           <el-input-number v-model="num" :min="1" :max=goods.stock size="mini"></el-input-number>

           <!-- 若非消费者，则不显示以下按钮 -->
           <!-- <el-row style="margin-top:'10px'" v-if="isConsumer()"> -->
            <el-button type="danger">立即购买</el-button>
            <el-button type="success" @click="add">加入购物车</el-button>
           <!-- </el-row> -->
           
          </el-col>
        </el-row>

      </el-col>
    </el-row>
    <!-- 底部 -->
    <Foot></Foot>
  </div>
</template>


<script>
//导入子组件
import Top from './commons/top.vue'
import Header from './commons/header.vue'
import Foot from './commons/foot.vue'

//导入util下的方法
import CookieUtil from '../util/cookieUtil'

export default{
  data(){
    return{
      gid: this.$route.params.gid,
      goods: {},
      num: 1
    }

  },
  components:{//注册组件
    Top,Header,Foot
  },
  mounted(){//在页面挂载时执行的方法
    this.$axios.get("/goods/findById/"+ this.gid).then(res => {
    console.log(res.data)
    this.goods = res.data.data;
    })
  },
  methods:{
    add(){
      this.$axios.post("/cart/add",{
        gid: this.gid,
        num: this.num,
        price:this.goods.price
      }).then(res => {    
        console.log(res.data)
        if(res.data.data){
          this.$message.success("添加成功")
        }else{
          this.$message.error("添加失败")
        }
        // //跳转到购物车页面
        // this.$router.push('/cart');
      })
    }
  }
    
    
      
  
 
}
</script>

<style scoped>

</style>